<style lang="scss" scoped>
#title {
  text-align: center;
  margin-bottom: 40px;
}
</style>
<template>
  <ui-main>
    <div class="flex col-center row-center h-100">
      <ui-card>
        <template v-slot:title>
          <div id="title">
            <span>开发委项目管理系统用户端</span>
          </div>
        </template>
        <van-form @submit="login">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
      </ui-card>
    </div>
  </ui-main>
</template>
<script>
import { loginApi } from "@api";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      this.$loading.open();
      loginApi(this.form)
        .then(res => {
          window.localStorage.setItem("usertoken", res.data.usertoken);
          this.$loading.close();
          this.$router.push({ path: "/project" });
        })
        .catch(error => {
          this.form.username = "";
          this.form.password = "";
          this.$loading.close();
        });
    }
  }
};
</script>
